import { onBeforeMount, onBeforeUnmount } from 'vue';
import { userName } from '@/pinia/getter';
import watermark from 'watermark-h5';
import { control } from '@/pinia/modules/control';
const WIDTH = 1024;
const floatWidth = 768;

export const initialFun = ()=> {
  watermark.init({
    parentDomName: 'body',
    show: true,
    color: 'rgba(200, 200, 200, 0.25)',
    title: userName.value,
    width: 100,
    height: 100,
    fontNum: 15,
    rotate: -25,
    zIndex: 9999,
  });
  const resizeHandler = () => {
    const useControl = control();
    const { setCollapse, setWebh5 } = useControl;
    const { innerWidth, innerHeight, screen={width:0, height:0} } = window
    const { width, height } = screen
    let widthNum = innerWidth
    if (/Mobi|Android|iPhone/i.test(navigator.userAgent) && width > height) {
      widthNum = innerHeight
    }
    if(widthNum < floatWidth) {
      setWebh5(true)
    }else {
      setWebh5(false)
      setCollapse(innerWidth < WIDTH?true:false);
    }
    
  };
  onBeforeMount(() => {
    resizeHandler()
    window.addEventListener('resize', resizeHandler)
  })

  onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeHandler)
  })
};